<div class="content">

    <script>

        $(document).ready(function() {

            // Bind click listener to grade summaries button
            $('#grade-summaries-button').click(function() {
                $('#grade-summaries-last-run').html('Running...');
            });

        });

    </script>

    <h1>Grade Reports</h1>
    {# This is a layout table #}
    <table>
        <tbody>
            <tr>
                <td width="50%">
                    <p> Pushing this button will update the grade summary data used to generate the rainbow grades reports.
                    </p>
                </td>
                <td width="5%"> </td>
                <td width="45%" style="position:relative">
                    <button id="grade-summaries-button" onclick="location.href='{{ summaries_url }}'" class="btn btn-primary" style="width:100%;position:absolute;top:50%;transform:translate(0,-50%);">Generate Grade Summaries</button>
                </td>
            </tr>
            <tr>
                <td width="50%"> </td>
                <td width="5%"> </td>
                <td width="45%" style="text-align: center">
                    Last ran: <span id="grade-summaries-last-run">{{ grade_summaries_last_run }}</span>
                </td>
            </tr>
            <tr class="bar"></tr>
            <tr class="bar"></tr>
            <tr>
                <td width="50%">
                    <p>Pushing this button will generate a CSV file (for download) with all student grades for all gradeables. </p>
                </td>
                <td width="5%"> </td>
                <td width="45%" style="position:relative">
                    <button onclick="location.href='{{ csv_url }}'" class="btn btn-primary" style="width:100%;position:absolute;top:50%;transform:translate(0,-50%);">Generate CSV Report</button>
                </td>
            </tr>
            <tr class="bar"></tr>
            <tr class="bar"></tr>
            <tr>
                <td width="50%">
                    <p><em><b>NOTE: Work in Progress</b></em><br>Web interface for creation and customization of Rainbow Grades for this course.<br>
                    <a target=_blank href="https://submitty.org/instructor/rainbow_grades/">Rainbow Grades Documentation<i style="font-style:normal;" class="fa-question-circle"></i></a></p>
                </td>
                <td width="5%"> </td>
                <td width="45%" style="position:relative">
                    <button onclick="location.href='{{ rainbow_grades_customization_url }}'" class="btn btn-primary" style="width:100%;position:absolute;top:50%;transform:translate(0,-50%);">Web-Based Rainbow Grades Generation</button>
                </td>
            </tr>
            <tbody>
    </table>
</div>
